import React, { Component } from 'react';
import './Item.css';
export default class Item extends Component {
  // 增加编辑旧的后更新为新的todoName的任务,需要在此组件记录一些数据
  state = {
    newTodoName: '',
    isEdit: false,
  };

  //点击input-checkbox的cheked，改变（反转）单选框的状态，先添加监听事件，再调用函数
  //要改变状态,首先要知道这个input的id,这个组件不能知道,要从另一个组件传输过来,传过来的时机是渲染每一个的同时传过来的

  // checked_handel = (id) => (hui_diao_han_shu_er) => {
  //   console.log('我在函数1里面调用局部作用域的函数二,再让函数二使用函数一中声明的变量id', id);
  //   this.props.checkedChange(id);
  // };
  checked_handel = (id) => {
    //此函数的作用是传参:id +返回函数
    return (e) => {
      //此函数是真正的调用干活的函数,必须的参数是id
      this.props.checkedChange(id);
    };
  };
  // checked_handel = (id) => {
  //   console.log(id);
  // };//报错??,原因是,事件监听的接收只能是函数,如果输入数据的时候是函数调用,
  // 那也必须让这个函数被调用完成之后返回一个函数,所以这就直接执行函数返回另一个函数
  // 之所以要这样做是因为必须把id传到父组件的函数的调用里面
  del_handel = (id) => (hui_diao_han_shu_er) => {
    console.log('点击删除');
    this.props.delTodoName(id);
  };

  // 编辑按钮的事件处理函数
  editHandle = () => {
    // 修改isEdit的值
    this.setState({
      isEdit: !this.state.isEdit,
    });
  };

  // 调用函数,更新数据
  updateTodo_handel = (e) => {
    this.setState({ newTodoName: e.target.value });
  };

  postUpdateTodo = (id) => (e) => {
    if (e.key !== 'Enter') return;
    const { newTodoName } = this.state;
    if (newTodoName.trim() === '') return;
    this.props.updateTodo(id, newTodoName);

    // 修改isEdit的值
    this.setState({
      isEdit: false,
    });
  };
  render() {
    /* 父组件List,通过属性传输过来了todo 项的内容 */
    const { todo } = this.props;
    const { isEdit, newTodoName } = this.state;
    //解构每一条item下面的id
    return (
      <li>
        <label>
          {isEdit ? (
            <input
              type="text"
              value={newTodoName}
              onChange={this.updateTodo_handel}
              onKeyDown={this.postUpdateTodo(todo.id)}
            />
          ) : (
            <div>
              {/* (在标签属性里面)受控的标签,需要添加处理函数onChange={} ,注意直接赋值,直接控制的才算*/}
              <input type="checkbox" checked={todo.isDone} onChange={this.checked_handel(todo.id)} />
              <span className={todo.isDone ? 'active' : ''}>{todo.todoName}</span>
            </div>
          )}
        </label>
        <button className="btn btn-danger" onClick={this.del_handel(todo.id)}>
          删除
        </button>
        <button className="btn btn-danger btn-edit" onClick={this.editHandle}>
          {/* 增加按钮,修改按钮状态 */}
          {isEdit ? '取消' : '编辑'}
        </button>
      </li>
    );
  }
}
